<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div class="grid-content">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>库存告急</span>
              <el-button style="float: right; padding: 3px 0" type="text"  @click="getLowStock">
                刷新<i class="el-icon-refresh"></i>
              </el-button>
            </div>
            <div class="text item">
              <div v-if="lowStocks.length>0">
                <el-scrollbar :native="false" style="height: 200px">
                  <el-table
                          :data="lowStocks"
                          stripe
                          style="width: 100%"
                          :show-header="true"
                          border
                          size="small"
                  >
                    <el-table-column
                            type="index"
                            label="序号"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="商品名"
                    >
                    </el-table-column>
                    <el-table-column
                            label="库存"
                            prop="stock">
                    </el-table-column>
                  </el-table>
                </el-scrollbar>
              </div>
              <div v-else class="noneData">暂无数据</div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12"
        ><div class="grid-content">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>销量排行</span>
              <el-button style="float: right; padding: 3px 0" type="text"  @click="getSalesRank"
                >刷新<i class="el-icon-refresh"></i
              ></el-button>
            </div>
            <div class="text item">
                <div v-if="salesRank.length>0">
                  <el-scrollbar :native="false" style="height: 200px">
                    <el-table
                            :data="salesRank"
                            stripe
                            style="width: 100%"
                            :show-header="true"
                            border
                            size="small"
                    >
                      <el-table-column
                              type="index"
                              label="排行"
                              width="50">
                      </el-table-column>
                      <el-table-column
                              prop="name"
                              label="商品名"
                      >
                      </el-table-column>
                      <el-table-column
                              label="销量"
                              prop="totalSales">
                      </el-table-column>
                    </el-table>
                  </el-scrollbar>
                </div>
                <div v-else class="noneData">暂无数据</div>
            </div>
          </el-card>
        </div></el-col
      >
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-card class="order-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>自提订单</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="getInviteOrders"
                >刷新<i class="el-icon-refresh"></i
              ></el-button>
            </div>
            <div class="text item">
              <div v-if="invites.length>0">
                <el-scrollbar :native="false" style="height: 340px">
                  <el-table
                          :data="invites"
                          stripe
                          style="width: 100%"
                          :show-header="true"
                          border
                          size="small"
                  >
                    <el-table-column
                            type="index"
                            label="序号"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="consignee"
                            label="收货人"
                    >
                    </el-table-column>
                    <el-table-column
                            label="联系方式"
                            prop="contact">
                    </el-table-column>
                    <el-table-column
                            label="商品数量"
                            prop="totalNum">
                    </el-table-column>
                    <el-table-column align="center" label="操作">
                      <template slot-scope="scope">
                        <p>
                          <el-button
                                  style="height: 10px;padding: 0"
                                  type="text"
                                  size="mini"
                                  @click="btnView(scope.row)"
                          >查看明细</el-button
                          >
                        </p>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-scrollbar>
              </div>
              <div v-else class="noneData">暂无数据</div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12"
        ><div class="grid-content bg-purple-light">
          <el-card class="order-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>配送订单</span>
              <el-button style="float: right; padding: 3px 0" type="text"  @click="getDeliverOrders"
                >刷新<i class="el-icon-refresh"></i
              ></el-button>
            </div>
            <div class="text item">
              <div v-if="delivers.length>0">
                <el-scrollbar :native="false" style="height: 340px">
                  <el-table
                          :data="delivers"
                          stripe
                          style="width: 100%"
                          :show-header="true"
                          border
                          size="small"
                  >
                    <el-table-column
                            type="index"
                            label="序号"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="consignee"
                            label="收货人"
                    >
                    </el-table-column>
                    <el-table-column
                            label="联系方式"
                            prop="contact">
                    </el-table-column>
                    <el-table-column
                            label="商品数量"
                            prop="totalNum">
                    </el-table-column>
                    <el-table-column align="center" label="操作">
                      <template slot-scope="scope">
                        <p>
                          <el-button
                                  style="height: 10px;padding: 0"
                                  type="text"
                                  size="mini"
                                  @click="btnView(scope.row)"
                          >查看明细</el-button
                          >
                        </p>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-scrollbar>
              </div>
              <div v-else class="noneData">暂无数据</div>
            </div>
          </el-card>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>

  import {api_lowStocksList, api_salesRankList} from "../api/product";
  import {api_orderReminderList} from "../api/order";

export default {
  data() {
    return{
      lowStocks:[],
      salesRank:[],
      delivers:[],
      invites:[],
    }
  },
  created() {
    this.getLowStock()
    this.getSalesRank()
    this.getDeliverOrders()
    this.getInviteOrders()
  },
  methods: {
    async getLowStock(){
      const { data: res } = await api_lowStocksList()
      this.lowStocks = res.data
    },
    async getSalesRank(){
      const { data: res } = await api_salesRankList()
      this.salesRank = res.data
    },
    async getDeliverOrders(){
      let params= {
        pickupWay:"DELIVER",
        status:"PAID"
      }
      const { data: res } = await api_orderReminderList(params)
      this.delivers = res.data
      console.log(res.data)
    },
    async getInviteOrders(){
      let params= {
        pickupWay:"INVITE",
        status:"PAID"
      }
      const { data: res } = await api_orderReminderList(params)
      this.invites = res.data
      console.log(res.data)
    },
    btnView(row) {
      this.$router.push({
        path: '/order/OrderView',
        query: {
          id: row.id,
          handleType: 'view',
        },
      })
    },
  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.grid-content {
  border-radius: 4px;
  min-height: 150px;
}
.text {
  font-size: 14px;
}

.item {
  padding: 0;
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 97%;
  height: 300px;
}
.order-card {
  width: 97%;
  height: 440px;
}
.noneData{
  text-align: center;
  color: #8E8E8E;
}
</style>
